<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tiptap commands 命令介绍 - itxst.com</title>
    <meta name="keywords" content="tiptap commands 命令介绍" />
    <meta name="description" content="tiptap编辑器提供了大量命令Commands，可以添加或更改内容、更改选择。如果你想用好tiptap编辑器，你需要掌握这些命令。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/uaqmeemr.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>tiptap commands 命令介绍</h1>
               
               <p class="pe"><strong>tiptap</strong>编辑器提供了大量命令<strong>Commands</strong>，可以添加或更改内容、更改选择。如果你想用好<strong>tiptap</strong>编辑器，你需要掌握这些命令。</p><h2>执行命令</h2><p class="pe"><code>Execute a command</code> , tiptap 所有可用的命令都通过编辑器实例访问，比如将选中文本加粗的命令如下。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.setBold();</code></pre><h2>链命令</h2><p class="pe"><code>Chain commands</code> &nbsp;大多数的命令可以组合到一个调用中，这比单独的函数调用要短和优雅一些，链命令以<code>.chain()</code>开头<code>.run()</code>结尾，将多个命令合并成一个事务，内容只更新一次事件也只触发一次，下面是链命令的代码例子。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor
  .chain()
  .focus()
  .toggleBold()
  .run()</code></pre><h2>自定义链命令</h2><p>链接命令时，事务被保留，如果要在自定义链命令，则需要使用事务并添加到其中，vue3 例子如下：</p><pre class="brush:html;toolbar:false;"><code class="language-html">&lt;template&gt;
  &lt;div class="editor"&gt;
    &lt;editor-content :editor="state.editor" /&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script setup lang="ts"&gt;
/*
 tiptap 中文文档
 https://www.itxst.com/tiptap/tutorial.html
*/
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";  
import Link from '@tiptap/extension-link';

//重写扩展
const CustomLink= Link.extend({
  addCommands() {
  return {
    customCommand: attributes =&gt; ({ chain }) =&gt; {
      // Doesn’t work:
      // return editor.chain() …
      // Does work:
      return chain()
        .insertContent('foo!')
        .insertContent('bar!')
        .run()
    },
  }
}
})

const state = reactive({
  editor: new Editor({
    content: "&lt;p&gt;Tiptap 中文文档，回车输入数字看看效果&lt;/p&gt;",
    extensions: [
      StarterKit,
      CustomLink 
    ],  
  }) as any,
});

onMounted(() =&gt; {
    setTimeout(()=&gt;{
      //执行自定义链命令
      state.editor.chain().customCommand().run();
    },2000)
});
&lt;/script&gt;
&lt;style scoped&gt;
.editor {
  margin: 10px 20px;
  width: 390px;
}
.editor:deep(.ProseMirror) {
  color: red;
  border: solid 1px #ddd;
  padding: 0px 6px;
  min-height: 160px;
}
.tools {
  display: flex;
  background-color: #eee;
  padding: 6px;
  justify-items: center;
}
.tools &gt; label {
  color: #1512e6;
  cursor: pointer;
}
.tools &gt; label + label {
  margin-left: 10px;
}
.editor:deep(a){
  color: #1512e6;
  cursor: pointer;
  text-decoration: underline;
}
&lt;/style&gt;</code></pre><h2>内联命令</h2><p>我们可以在一条链命令中插入业务逻辑，它可以和这个链命令在一个事务中执行（触发一次内容更新、触发一次事件），例子如下：</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 内联命令
editor
  .chain()
  .focus()
  .command(({ tr }) =&gt; {
    // 在事务中执行以下代码
    tr.insertText('hey, that’s cool!') 

    return true
  })
  .run()</code></pre><h2>试运行命令</h2><p class="pe">有时您不想实际执行命令，只想知道是否可以执行命令，比如你执行<strong>editor.can().insertContent</strong> 它并不会插入内容到编辑器，它只会返回<strong>true</strong>或者<strong>false</strong>告诉你能否插入内容。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 检测 insertContent 命令是否能执行
let res = editor.can().insertContent();
// 检测这条链命令是否能执行
let res = editor
  .can()
  .chain()
  .toggleBold()
  .toggleItalic()
  .run()</code></pre><p class="pe">如何你是自己实现一个扩展，希望命令支持试运行，代码如下：<strong>.can().insertText()</strong></p><pre class="brush:js;toolbar:false"><code class="language-javascript">export default (value) =&gt; ({ tr, dispatch }) =&gt; {

  if (dispatch) {
    tr.insertText(value)
  }

  return true
}
/*
如果无法理解，访问下面连接查看table扩展的实现代码
https://github.com/ueberdosis/tiptap/blob/998e6bbe79208e5ac7fea4f2161102f6c3f9af71/packages/extension-table/src/table.ts
*/</code></pre><p>如果你是封装 tiptap 命令，则无需检查，tiptap 会为您完成</p><pre class="brush:js;toolbar:false"><code class="language-javascript">addCommands() {
  return {
    bold: () =&gt; ({ commands }) =&gt; {
      return commands.toggleMark('bold')
    },
  }
}</code></pre><p>如果你只是包装一个普通的 ProseMirror 命令</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { exitCode } from '@tiptap/pm/commands'

export default () =&gt; ({ state, dispatch }) =&gt; {
  return exitCode(state, dispatch)
}</code></pre><h2>Try commands</h2><p>执行第一个命令，如果第一个命令执行成功，那么不会往下执行命令列队，如果第一个命令执行失败，它将会一个一个的命令往下执行</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.first(({ commands }) =&gt; [
  () =&gt; commands.undoInputRule(),
  () =&gt; commands.deleteSelection(),
  // …
])</code></pre><p class="pe">也可以在命令中应用<strong>commands.first</strong>方法</p><pre class="brush:js;toolbar:false"><code class="language-javascript">export default () =&gt; ({ commands }) =&gt; {
  return commands.first([
    () =&gt; commands.undoInputRule(),
    () =&gt; commands.deleteSelection(),
    // …
  ])
}</code></pre>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2     curr-dir arrow-2" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="3" class="leve-3   doc-1    doc-2 " href="/tiptap/uaqmeemr.html" title="tiptap commands 命令介绍">commands 命令介绍</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/rvvain7z.html" title="tiptap content 文档命令">content 文档命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/3qbv63ii.html" title="tiptap nodes &amp; marks 命令大全">nodes &amp; marks 命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/ueriebja.html" title="tiptap lists 命令">lists 命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/selection.html" title="tiptap selection 命令">selection 命令</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
